<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/settings.css" rel="stylesheet" />
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			
			<div id="popover" class="mui-popover">
			    <div class="mui-card">
			      	<div class="mui-card-content" >
			      		<div class="img">
			      			<img src="" id="my_images">
			      		</div>
			      		<div class="text" style="text-align: center; font-size: 12px; color: #999999;">
							<br>
			      			长按头像右侧的按钮可修改头像
			      			<br>
			      		</div>
			      	</div>
			    </div>
			</div>
			
			<div class="mui-scroll">
				<script src="js/mui.js"></script>
				<script type="text/javascript">
					mui.init({gestureConfig:{
								tap: true, //默认为true
								doubletap: true, //默认为false
								longtap: true, //默认为false
								swipe: true, //默认为true
								drag: true, //默认为true
								hold:true,//默认为false，不监听
								release:false//默认为false，不监听
					}})
				</script>
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">个人空间</h1>
					<div class="account">添加银行卡</div>
				</header>
				<div class="mui-content">
					<!-- 总体情况 -->
					<div id="user_id" class="list" style="background: none;">
						ID
						<font></font>
					</div>
					<div id="user_img" class="list">
						头像
						<font><div><img id="my_image" src="./images/error.png" width="100%" height="100%"></div></font>
					</div>
					<div id="user_password" class="list">
						修改密码
						<font></font>
					</div>
					<div id="user_name" class="list">
						昵称
						<font></font>
					</div>
					<div id="user_tel" class="list">
						手机号
						<font></font>
					</div>
					<div id="my_card" class="list" style="background: url(static_img/account_info.png) no-repeat 297px 10px; background-size: 25px 25px;">
						我的卡片
					</div>
					<div id="exit" class="list" style="background: none;">
						<button type="button" id="exit_login">退出登录</button>
					</div>
					<!-- 每个月的信息 -->
					<!-- <input type="file" name="file" id="hidden" value=""  /> -->
				</div>
			</div>
		</div>
		
		
		<script type="text/javascript">
			
			// 单击查看头像
			document.getElementById('user_img').addEventListener('tap', function(){
				mui('.mui-popover').popover('toggle',);
			})
			
			// 长按修改头像
			document.getElementById('user_img').addEventListener('longtap', function() {
				if (mui.os.plus) {
					var a = [{ 
						title: "拍照"          //这些都是可以点击的选项的内容
					},{ 
						title: "从手机相册选择" 
					}]; 
					plus.nativeUI.actionSheet({ 
						title: "小主的头像美美哒  (照片要为1:1格式哦)",           //这里就是这个弹窗的title
						cancel: "取消",                     //取消按钮
						buttons: a 
					},function(b) { /*actionSheet 按钮点击事件*/ 　
						// mui.toast(a[b.index-1].title) //这里面就是触发的事件，比如想做一个选择性别的弹窗，就可以通过a[b.index].title来获取当前点击了男还是女，注意，此处的b.index是从1开始的。要从0开始的话，要记得减1.
						switch(b.index){
							case 1:clickCamera();break;
							case 2:clickGallery();break;
						}
					}) 
				} 
			}, false);
			
			// 摄像机
			function clickCamera(){
				var c = plus.camera.getCamera();
				c.captureImage(function(e) {
					plus.io.resolveLocalFileSystemURL(e, function(entry) {
						var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径
						// 预览效果
						document.getElementById('my_image').src = imgSrc;
						getUrlBase64(imgSrc, 'png', function (base64) {
							// base64 = base64.split(',')[1]
							base64 = base64.substring(base64.indexOf(",")+1,base64.length);
							base64 = base64.replace(/\+/g,'%2B');
							upload(base64)
						});
					}, 
					function(e) {
						console.log("读取拍照文件错误：" + e.message);
					});
				}, function(s) {
					console.log("error" + s);
				}, {
					filename: "_doc/camera/"
				})

			};
			
			// 相册
			function clickGallery(){
				plus.gallery.pick( function(e){
					for(var i in e.files){
						var fileSrc = e.files[i];
						// 预览效果
						document.getElementById('my_image').src = fileSrc;
						// upload();
						getUrlBase64(fileSrc, 'png', function (base64){
							base64 = base64.substring(base64.indexOf(",")+1,base64.length);
							base64 = base64.replace(/\+/g,'%2B');
							upload(base64)
						});
					}
				},function(e){
					mui.toast( "取消选择图片" );
				},{
					filter: "image",
					multiple: true,
					maximum: 1,
					system: false,
				    onmaxed: function(){
						plus.nativeUI.alert('最多只能选择1张图片');
				    }
				});
			}
			
			// 上传头像
			function upload(fileSrc){
				// mui.alert(fileSrc)
				// mui.alert(localStorage.getItem('request_url')+ "cost/user/update_img/?token="+localStorage.getItem('uid'))
			   	mui.ajax(localStorage.getItem('request_url')+ "cost/user/update_img/?token="+localStorage.getItem('uid'), {
			   	    data:"token=" + localStorage.getItem('uid') + "&file=" + fileSrc,
			   	    dataType:'json',  
			   	    type:'POST',  
			   	    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
			   	    timeout:60000,  
			   	    success:function show(e){
						mui.toast(e.msg)
			   			localStorage.setItem('login_img', e.data.img_load)
						myRefresh()
			   		},  
			   	    error:function(xhr,type,errorThrown){
			   			mui.toast('sorry，这个头像上传失败啦...')
			   	    }  
			   	});
			};
			
			// base64编码
			function getUrlBase64(url, ext, callback) {
			    var canvas = document.createElement("canvas");   //创建canvas DOM元素
			    var ctx = canvas.getContext("2d");
			    var img = new Image;
			    img.crossOrigin = 'Anonymous';
			    img.src = url;
			    img.onload = function () {
			        canvas.height = 400; //指定画板的高度,自定义
			        canvas.width = 400; //指定画板的宽度，自定义
			        ctx.drawImage(img, 0, 0, 400, 400); //参数可自定义
			        var dataURL = canvas.toDataURL("image/" + ext);
			        callback.call(this, dataURL); //回掉函数获取Base64编码
			        canvas = null;
			    };
			}
			
			mui.init({
				pullRefresh : {
					container:"#pullrefresh",
					down: {
						height:50,
						style:'circle',
						auto:true,
						callback:myRefresh
					}
				}
			});
			// 下拉刷新
			function myRefresh(){
				setTimeout(function(){
					mui.init();
					// 刷新信息
					mui.ajax(localStorage.getItem('request_url')+ "cost/user/show_my_info/?token="+localStorage.getItem('uid'), {
					    data:"token=" + localStorage.getItem('uid'),
					    dataType:'json',  
					    type:'POST',  
					    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
					    timeout:2000,  
					    success:function show(e){
							
							localStorage.setItem('login_name',e.data.username);
							localStorage.setItem('login_id',e.data.user_id);
							localStorage.setItem('login_img', e.data.img_load);
							
							document.getElementById('user_id').firstElementChild.innerText = e.data.user_id;
							document.getElementById('user_name').firstElementChild.innerText = e.data.username;
							document.getElementById('user_tel').firstElementChild.innerText = e.data.tel;
							document.getElementById('user_img').src = localStorage.getItem('request_url')+'static/user_upload/'+localStorage.getItem('login_img');
							document.getElementById('my_images').src = localStorage.getItem('request_url')+'static/user_upload/'+localStorage.getItem('login_img');
							
							mui.toast('😃更新完成...');
						},  
					    error:function(xhr,type,errorThrown){
							mui.ajax(localStorage.getItem('request_url')+ "cost/user/logout/?token="+localStorage.getItem('uid'), {
							    data:"token=" + localStorage.getItem('uid'),
							    dataType:'json',  
							    type:'POST',  
							    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
							    timeout:2000,  
							    success:function show(e){
								},  
							    error:function(xhr,type,errorThrown){
							    }  
							});
							mui.toast('😥登录失效啦~~');
							// 清除本地信息
							localStorage.removeItem('uid');
							localStorage.removeItem('login_name');
							localStorage.removeItem('login_id');
							localStorage.removeItem('account_list');
							mui.back();
							
					    }  
					});
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				},500)
			}
			
			// 从子页面返回刷新-
			window.addEventListener('customEvent', function(event) {
			    // mui.fire()传过来的额外的参数，在event.detail中；
			    var detail = event.detail;
			    // var param = detail.param;
			    // 执行相应的ajax或者操作DOM等操作
				myRefresh()
			});
			
			mui.plusReady(function (){
				// 重构back函数
				var old_back = mui.back;
				mui.back = function() {
				    // 获取目标口窗口对象
				    var target = plus.webview.getWebviewById('mine_page.html');
				    // var target = plus.webview.getWebviewById("my/my.html");
				    // 执行相应的事件
				    mui.fire(target, 'customEvent', {});
				    // 执行关闭
				    old_back();
				};
				
				document.getElementById('my_image').src = localStorage.getItem('request_url')+'static/user_upload/'+localStorage.getItem('login_img')
				document.getElementById('my_images').src = localStorage.getItem('request_url')+'static/user_upload/'+localStorage.getItem('login_img')
				
			    document.getElementById('exit_login').addEventListener('tap',function(){
					mui.ajax(localStorage.getItem('request_url')+ "cost/user/logout/?token="+localStorage.getItem('uid'), {
					    data:"token=" + localStorage.getItem('uid'),
					    dataType:'json',  
					    type:'POST',  
					    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
					    timeout:2000,  
					    success:function show(e){
							mui.toast('😶退出成功');
						},  
					    error:function(xhr,type,errorThrown){
					    }  
					});
					localStorage.removeItem("uid");
					localStorage.removeItem('login_id');
					localStorage.removeItem("login_name");
					localStorage.removeItem('account_list');
					mui.back();
					
				})
				// 修改密码
				document.getElementById('user_password').addEventListener('tap',function(){
					mui.openWindow({
						url : 'change_password.html',
						id : 'change_password.html'
					});
				})
				// 修改昵称
				document.getElementById('user_name').addEventListener('tap',function(e){
					var val = this.firstElementChild.innerHTML
					mui.openWindow({
						url:'change_user_info.html',
						id:'change_user_info.html',
						extras:{
							val:val,
							load:'update_username',
							can: 'username'
						},
					});
				});
				// 修改手机号
				document.getElementById('user_tel').addEventListener('tap',function(e){
					var val = this.firstElementChild.innerHTML
					mui.openWindow({
						url:'change_tel.html',
						id:'change_tel.html',
						extras:{
							val:val,
						},
					})
				})
				// 添加银行卡
				document.getElementsByClassName('account')[0].addEventListener('tap',function(){
					mui.openWindow({
						url : 'add_account.html',
						id : 'add_account.html'
					});
				})
				// 展示银行卡
				document.getElementById('my_card').addEventListener('tap',function(){
					mui.openWindow({
						url : 'account_list.html',
						id : 'account_list.html'
					});
				})
			})
		</script>
	</body>

</html>
